<template>
  <div class="module-selector">
    <!-- 顶部导航 -->
    <header class="selector-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="system-title">绵阳办公管理系统</h1>
          <span class="system-subtitle">Mianyang Office Management System</span>
        </div>
        <div class="header-right">
          <div class="user-info">
            <span class="user-avatar">{{ currentUser.charAt(0) }}</span>
            <div class="user-details">
              <span class="current-user">{{ currentUser }}</span>
              <span class="user-role">系统管理员</span>
            </div>
          </div>
          <div class="time-info">
            <span class="current-time">{{ currentTime }}</span>
            <span class="current-date">{{ currentDate }}</span>
          </div>
          <button class="logout-btn" @click="handleLogout">
            <span class="logout-icon">👋</span>
            退出
          </button>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="selector-main">
      <!-- 欢迎区域 -->
      <div class="welcome-section">
        <div class="welcome-content">
          <h2 class="welcome-title">欢迎回来，{{ currentUser }}！</h2>
          <p class="welcome-subtitle">请选择您要使用的功能模块开始工作</p>
          <div class="welcome-stats">
            <div class="quick-stat">
              <span class="stat-icon">📧</span>
              <span class="stat-text"
                >今日{{ systemStats.emails }}封新邮件</span
              >
            </div>
            <div class="quick-stat">
              <span class="stat-icon">📢</span>
              <span class="stat-text"
                >{{ systemStats.announcements }}条待读公告</span
              >
            </div>
            <div class="quick-stat">
              <span class="stat-icon">👥</span>
              <span class="stat-text">{{ systemStats.users }}人在线</span>
            </div>
          </div>
        </div>
        <div class="welcome-illustration">
          <div class="floating-cards">
            <div class="floating-card card-1">📊</div>
            <div class="floating-card card-2">📝</div>
            <div class="floating-card card-3">💼</div>
          </div>
        </div>
      </div>

      <!-- 功能模块区域 -->
      <div class="modules-section">
        <div class="section-header">
          <h3 class="section-title">功能模块</h3>
          <p class="section-subtitle">选择您需要的办公功能</p>
        </div>

        <div class="modules-grid">
          <div
            v-for="(module, key) in modules"
            :key="key"
            class="module-card"
            :class="{ 'module-featured': module.featured }"
            @click="selectModule(key)"
          >
            <div class="module-header">
              <div class="module-icon-wrapper">
                <span class="module-icon">{{ module.icon }}</span>
                <div v-if="module.featured" class="featured-badge">热门</div>
              </div>
              <div class="module-meta">
                <h4 class="module-title">{{ module.name }}</h4>
                <span class="module-category">{{ module.category }}</span>
              </div>
            </div>

            <p class="module-description">{{ module.description }}</p>

            <div class="module-features">
              <div class="features-list">
                <span
                  v-for="feature in module.features"
                  :key="feature"
                  class="feature-tag"
                >
                  {{ feature }}
                </span>
              </div>
            </div>

            <div class="module-stats">
              <div class="module-stat">
                <span class="stat-value">{{ module.stats.users }}</span>
                <span class="stat-label">活跃用户</span>
              </div>
              <div class="module-stat">
                <span class="stat-value">{{ module.stats.items }}</span>
                <span class="stat-label">{{ module.stats.itemType }}</span>
              </div>
            </div>

            <button class="module-enter-btn">
              <span class="btn-text">进入{{ module.name }}</span>
              <span class="btn-arrow">→</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 快速操作区域 -->
      <div class="quick-actions-section">
        <div class="section-header">
          <h3 class="section-title">快速操作</h3>
          <p class="section-subtitle">常用功能快捷入口</p>
        </div>

        <div class="quick-actions-grid">
          <div
            v-for="action in quickActions"
            :key="action.key"
            class="quick-action-card"
            @click="handleQuickAction(action.key)"
          >
            <div class="action-icon">{{ action.icon }}</div>
            <div class="action-content">
              <h5 class="action-title">{{ action.title }}</h5>
              <p class="action-description">{{ action.description }}</p>
            </div>
            <div class="action-arrow">→</div>
          </div>
        </div>
      </div>

      <!-- 系统概览区域 -->
      <div class="overview-section">
        <div class="overview-left">
          <h3 class="section-title">系统概览</h3>
          <div class="overview-stats">
            <div class="overview-stat-card">
              <div class="stat-icon-wrapper primary">
                <span class="stat-icon">👥</span>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ systemStats.totalUsers }}</div>
                <div class="stat-label">注册用户</div>
                <div class="stat-change positive">
                  +{{ systemStats.newUsers }} 本月新增
                </div>
              </div>
            </div>

            <div class="overview-stat-card">
              <div class="stat-icon-wrapper success">
                <span class="stat-icon">📊</span>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ systemStats.totalActions }}</div>
                <div class="stat-label">今日操作</div>
                <div class="stat-change positive">
                  +{{ systemStats.actionIncrease }}% 较昨日
                </div>
              </div>
            </div>

            <div class="overview-stat-card">
              <div class="stat-icon-wrapper warning">
                <span class="stat-icon">📈</span>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ systemStats.efficiency }}%</div>
                <div class="stat-label">系统效率</div>
                <div class="stat-change positive">优秀</div>
              </div>
            </div>
          </div>
        </div>

        <div class="overview-right">
          <div class="activity-feed">
            <h4 class="feed-title">最近活动</h4>
            <div class="activity-list">
              <div
                v-for="activity in recentActivities"
                :key="activity.id"
                class="activity-item"
              >
                <div class="activity-icon">{{ activity.icon }}</div>
                <div class="activity-content">
                  <div class="activity-text">{{ activity.text }}</div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部信息 -->
    <footer class="selector-footer">
      <div class="footer-content">
        <div class="footer-left">
          <div class="system-info">
            <span class="system-version">企业办公管理系统 v2.1.0</span>
            <span class="copyright"
              >© 2025 Chronos22220399. All rights reserved.</span
            >
          </div>
        </div>
        <div class="footer-center">
          <div class="server-status">
            <span class="status-indicator online"></span>
            <span class="status-text">服务器运行正常</span>
          </div>
        </div>
        <div class="footer-right">
          <div class="session-info">
            <span>会话ID: {{ sessionId }}</span>
            <span>最后活动: {{ lastActivity }}</span>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";

// Emits
const emit = defineEmits(["module-select"]);

// 响应式数据
const currentUser = ref("Chronos22220399");
const currentTime = ref("");
const sessionId = ref("SES-" + Date.now().toString(36));

// 系统统计数据
const systemStats = ref({
  users: 45,
  emails: 126,
  announcements: 3,
  documents: 18,
  totalUsers: 1205,
  newUsers: 28,
  totalActions: 2847,
  actionIncrease: 15.6,
  efficiency: 96.8,
});

// 最近活动
const recentActivities = ref([
  { id: 1, icon: "📧", text: "张三发送了一封邮件给技术部", time: "5分钟前" },
  { id: 2, icon: "📢", text: '李四发布了新公告"周例会安排"', time: "15分钟前" },
  { id: 3, icon: "📄", text: "王五上传了项目文档", time: "23分钟前" },
  { id: 4, icon: "👥", text: "新员工赵六加入了组织架构", time: "1小时前" },
  { id: 5, icon: "📊", text: "系统生成了月度统计报表", time: "2小时前" },
]);

// 快速操作
const quickActions = ref([
  {
    key: "send-email",
    icon: "✉️",
    title: "发送邮件",
    description: "快速发送邮件给团队成员",
  },
  {
    key: "create-announcement",
    icon: "📢",
    title: "发布公告",
    description: "向全体员工发布重要通知",
  },
  {
    key: "upload-document",
    icon: "📤",
    title: "上传文档",
    description: "上传和分享工作文档",
  },
  {
    key: "view-contacts",
    icon: "👥",
    title: "查看通讯录",
    description: "浏览组织架构和联系人",
  },
  {
    key: "system-stats",
    icon: "📊",
    title: "查看统计",
    description: "查看系统使用统计数据",
  },
  {
    key: "help-center",
    icon: "❓",
    title: "帮助中心",
    description: "获取使用帮助和技术支持",
  },
]);

// 模块配置
const modules = ref({
  email: {
    name: "邮件管理",
    icon: "✉️",
    category: "通信协作",
    description:
      "企业内部邮件收发、群发、历史记录查询与统计，支持邮件模板和自动化处理",
    features: ["邮件发送", "模板管理", "统计报表", "自动回复"],
    featured: true,
    stats: { users: 142, items: 1534, itemType: "邮件" },
  },
  contacts: {
    name: "通讯录管理",
    icon: "👥",
    category: "组织管理",
    description:
      "组织成员、部门、外部联系人等信息的统一管理与查询，支持分组和权限控制",
    features: ["组织架构", "联系人管理", "分组标签", "权限控制"],
    featured: true,
    stats: { users: 95, items: 456, itemType: "联系人" },
  },
  announcement: {
    name: "公告管理",
    icon: "📢",
    category: "信息发布",
    description:
      "企业内部信息的统一发布、查阅与归档，支持审批流程和已读状态追踪",
    features: ["公告发布", "审批管理", "已读追踪", "定时发布"],
    featured: false,
    stats: { users: 78, items: 234, itemType: "公告" },
  },
  news: {
    name: "新闻管理",
    icon: "📰",
    category: "内容管理",
    description: "企业内部或对外新闻资讯的集中发布、查阅与归档，支持多媒体内容",
    features: ["新闻发布", "分类管理", "浏览统计", "多媒体支持"],
    featured: false,
    stats: { users: 156, items: 89, itemType: "新闻" },
  },
  document: {
    name: "文档管理",
    icon: "📁",
    category: "文件存储",
    description: "企业内部文件资料的统一上传、分组、分享与查阅，支持版本控制",
    features: ["文档上传", "权限管理", "版本控制", "在线预览"],
    featured: true,
    stats: { users: 203, items: 1876, itemType: "文档" },
  },
  workflow: {
    name: "流程管理",
    icon: "🔄",
    category: "业务流程",
    description:
      "企业内部各类审批、申请、报销等业务流程的统一管理，支持自定义流程",
    features: ["流程设计", "审批管理", "进度追踪", "报表统计"],
    featured: false,
    stats: { users: 67, items: 342, itemType: "流程" },
  },
});

// 计算属性
const currentDate = computed(() => {
  const now = new Date();
  const options = {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  };
  return now.toLocaleDateString("zh-CN", options);
});

const lastActivity = computed(() => {
  const now = new Date();
  return now.toLocaleTimeString("zh-CN", {
    hour: "2-digit",
    minute: "2-digit",
  });
});

// 定时器引用
let timeInterval = null;

// 更新时间
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString("zh-CN", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
};

// 选择模块
const selectModule = (moduleKey) => {
  // 添加点击效果
  const card = event.currentTarget;
  card.style.transform = "scale(0.98)";
  setTimeout(() => {
    card.style.transform = "";
    emit("module-select", moduleKey);
  }, 150);
};

// 快速操作
const handleQuickAction = (actionKey) => {
  console.log("Quick action:", actionKey);
  // 这里可以根据不同的快速操作执行不同的逻辑
  switch (actionKey) {
    case "send-email":
      emit("module-select", "email");
      break;
    case "create-announcement":
      emit("module-select", "announcement");
      break;
    case "upload-document":
      emit("module-select", "document");
      break;
    case "view-contacts":
      emit("module-select", "contacts");
      break;
    default:
      alert(`执行快速操作: ${actionKey}`);
  }
};

// 退出登录
const handleLogout = () => {
  if (confirm("确定要退出系统吗？")) {
    alert("退出登录");
  }
};

// 生命周期
onMounted(() => {
  updateTime();
  timeInterval = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
  }
});
</script>

<style scoped>
.module-selector {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  width: 100vw;
  /* 确保占满整个视窗宽度 */
  margin: 0;
  padding: 0;
}

/* 顶部导航 */
.selector-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.header-content {
  width: 100%;
  /* 改为100%宽度 */
  max-width: none;
  /* 移除最大宽度限制 */
  margin: 0;
  padding: 0 40px;
  /* 增加左右内边距 */
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  flex-direction: column;
}

.system-title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin: 0;
  letter-spacing: -0.5px;
}

.system-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
  font-weight: 400;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.current-user {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.user-role {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.time-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: white;
}

.current-time {
  font-size: 18px;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

.current-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.logout-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 主要内容区 */
.selector-main {
  flex: 1;
  width: 100%;
  /* 改为100%宽度 */
  max-width: none;
  /* 移除最大宽度限制 */
  margin: 0;
  padding: 40px 40px;
  /* 增加左右内边距 */
}

/* 欢迎区域 */
.welcome-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  /* 增加间距 */
  margin-bottom: 80px;
  /* 增加底部间距 */
  align-items: center;
  width: 100%;
}

.welcome-content {
  color: white;
}

.welcome-title {
  font-size: 48px;
  /* 增大字体 */
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.welcome-subtitle {
  font-size: 20px;
  /* 增大字体 */
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
  line-height: 1.5;
}

.welcome-stats {
  display: flex;
  gap: 30px;
  /* 增加间距 */
  flex-wrap: wrap;
}

.quick-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 20px;
  /* 增加内边距 */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.stat-icon {
  font-size: 18px;
  /* 增大图标 */
}

.stat-text {
  font-size: 15px;
  /* 增大字体 */
  font-weight: 500;
}

.welcome-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 300px;
  /* 增加高度 */
}

.floating-cards {
  position: relative;
  width: 240px;
  /* 增加宽度 */
  height: 240px;
  /* 增加高度 */
}

.floating-card {
  position: absolute;
  width: 70px;
  /* 增加尺寸 */
  height: 70px;
  background: white;
  border-radius: 15px;
  /* 增加圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  /* 增大图标 */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  /* 增强阴影 */
  animation: float 3s ease-in-out infinite;
}

.card-1 {
  top: 20px;
  left: 20px;
  animation-delay: 0s;
}

.card-2 {
  top: 60px;
  right: 20px;
  animation-delay: 1s;
}

.card-3 {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 2s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  /* 增加浮动幅度 */
}

/* 功能模块区域 */
.modules-section {
  margin-bottom: 80px;
  /* 增加间距 */
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
  /* 增加间距 */
}

.section-title {
  font-size: 36px;
  /* 增大字体 */
  font-weight: 700;
  color: white;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.section-subtitle {
  font-size: 18px;
  /* 增大字体 */
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  /* 增加最小宽度 */
  gap: 40px;
  /* 增加间距 */
  width: 100%;
}

.module-card {
  background: white;
  border-radius: 24px;
  /* 增加圆角 */
  padding: 35px;
  /* 增加内边距 */
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.15);
  /* 增强阴影 */
  transition: all 0.4s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.module-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  /* 增加高度 */
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.module-card.module-featured::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
  border-radius: 26px;
  /* 调整圆角 */
  z-index: -1;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }
}

.module-card:hover {
  transform: translateY(-10px);
  /* 增加悬停效果 */
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
  /* 增强阴影 */
}

.module-header {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  /* 增加间距 */
  margin-bottom: 25px;
}

.module-icon-wrapper {
  position: relative;
}

.module-icon {
  font-size: 52px;
  /* 增大图标 */
  display: block;
}

.featured-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  color: white;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.module-meta {
  flex: 1;
}

.module-title {
  font-size: 26px;
  /* 增大字体 */
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.module-category {
  background: #f8f9fa;
  color: #6c757d;
  padding: 5px 12px;
  /* 增加内边距 */
  border-radius: 15px;
  /* 增加圆角 */
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.module-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
  font-size: 15px;
  /* 增大字体 */
}

.module-features {
  margin-bottom: 30px;
}

.features-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 增加间距 */
}

.feature-tag {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #495057;
  padding: 8px 15px;
  /* 增加内边距 */
  border-radius: 18px;
  /* 增加圆角 */
  font-size: 13px;
  /* 增大字体 */
  font-weight: 500;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.feature-tag:hover {
  background: linear-gradient(135deg, #e9ecef, #dee2e6);
  transform: translateY(-1px);
}

.module-stats {
  display: flex;
  gap: 25px;
  /* 增加间距 */
  margin-bottom: 30px;
  padding: 20px;
  /* 增加内边距 */
  background: #f8f9fa;
  border-radius: 15px;
  /* 增加圆角 */
}

.module-stat {
  text-align: center;
  flex: 1;
}

.stat-value {
  display: block;
  font-size: 22px;
  /* 增大字体 */
  font-weight: 700;
  color: #667eea;
}

.stat-label {
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

.module-enter-btn {
  width: 100%;
  padding: 18px 30px;
  /* 增加内边距 */
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 15px;
  /* 增加圆角 */
  font-size: 17px;
  /* 增大字体 */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.module-enter-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.module-enter-btn:hover::before {
  left: 100%;
}

.module-enter-btn:hover {
  transform: translateY(-3px);
  /* 增加悬停效果 */
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
  /* 增强阴影 */
}

.btn-arrow {
  transition: transform 0.3s ease;
  font-size: 20px;
  /* 增大箭头 */
}

.module-card:hover .btn-arrow {
  transform: translateX(5px);
  /* 增加移动距离 */
}

/* 快速操作区域 */
.quick-actions-section {
  margin-bottom: 80px;
  /* 增加间距 */
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  /* 增加最小宽度 */
  gap: 25px;
  /* 增加间距 */
}

.quick-action-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  /* 增加圆角 */
  padding: 25px;
  /* 增加内边距 */
  display: flex;
  align-items: center;
  gap: 20px;
  /* 增加间距 */
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.quick-action-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-3px);
  /* 增加悬停效果 */
}

.action-icon {
  font-size: 28px;
  /* 增大图标 */
  width: 56px;
  /* 增加尺寸 */
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  /* 增加圆角 */
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 17px;
  /* 增大字体 */
  font-weight: 600;
  margin: 0 0 6px 0;
}

.action-description {
  font-size: 14px;
  /* 增大字体 */
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.action-arrow {
  font-size: 20px;
  /* 增大箭头 */
  opacity: 0.7;
  transition: all 0.3s ease;
}

.quick-action-card:hover .action-arrow {
  opacity: 1;
  transform: translateX(5px);
  /* 增加移动距离 */
}

/* 系统概览区域 */
.overview-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  /* 增加间距 */
  margin-bottom: 60px;
  /* 增加间距 */
}

.overview-stats {
  display: flex;
  flex-direction: column;
  gap: 25px;
  /* 增加间距 */
}

.overview-stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  /* 增加圆角 */
  padding: 30px;
  /* 增加内边距 */
  display: flex;
  align-items: center;
  gap: 25px;
  /* 增加间距 */
  color: white;
}

.stat-icon-wrapper {
  width: 70px;
  /* 增加尺寸 */
  height: 70px;
  border-radius: 18px;
  /* 增加圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  /* 增大图标 */
}

.stat-icon-wrapper.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-icon-wrapper.success {
  background: linear-gradient(135deg, #56ab2f, #a8e6cf);
}

.stat-icon-wrapper.warning {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 36px;
  /* 增大字体 */
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 15px;
  /* 增大字体 */
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}

.stat-change {
  font-size: 13px;
  /* 增大字体 */
  padding: 5px 10px;
  /* 增加内边距 */
  border-radius: 10px;
  /* 增加圆角 */
  font-weight: 500;
}

.stat-change.positive {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.activity-feed {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  /* 增加圆角 */
  padding: 30px;
  /* 增加内边距 */
  color: white;
}

.feed-title {
  font-size: 20px;
  /* 增大字体 */
  font-weight: 600;
  margin-bottom: 25px;
  /* 增加间距 */
  color: white;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* 增加间距 */
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  /* 增加间距 */
  padding: 15px;
  /* 增加内边距 */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  /* 增加圆角 */
  transition: all 0.2s ease;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.activity-icon {
  width: 36px;
  /* 增加尺寸 */
  height: 36px;
  border-radius: 10px;
  /* 增加圆角 */
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  /* 增大图标 */
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 15px;
  /* 增大字体 */
  line-height: 1.4;
  margin-bottom: 5px;
}

.activity-time {
  font-size: 13px;
  /* 增大字体 */
  color: rgba(255, 255, 255, 0.6);
}

/* 底部信息 */
.selector-footer {
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.footer-content {
  width: 100%;
  /* 改为100%宽度 */
  max-width: none;
  /* 移除最大宽度限制 */
  margin: 0;
  padding: 30px 40px;
  /* 增加内边距 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  /* 增大字体 */
}

.footer-left .system-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* 增加间距 */
}

.system-version {
  font-weight: 600;
}

.footer-center {
  text-align: center;
}

.server-status {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 增加间距 */
}

.status-indicator {
  width: 10px;
  /* 增加尺寸 */
  height: 10px;
  border-radius: 50%;
}

.status-indicator.online {
  background: #4caf50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
  /* 增强发光效果 */
}

.footer-right .session-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* 增加间距 */
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-content {
    padding: 0 30px;
  }

  .selector-main {
    padding: 30px 30px;
  }

  .modules-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }

  .overview-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .welcome-section {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .header-content {
    padding: 0 20px;
  }

  .selector-main {
    padding: 20px;
  }

  .welcome-section {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .welcome-title {
    font-size: 36px;
  }

  .modules-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions-grid {
    grid-template-columns: 1fr;
  }

  .header-content {
    flex-direction: column;
    height: auto;
    padding: 15px 20px;
    gap: 15px;
  }

  .header-right {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 15px;
    text-align: center;
    padding: 20px;
  }

  .overview-stats {
    gap: 15px;
  }

  .overview-stat-card {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .module-card {
    padding: 25px;
  }

  .module-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .quick-action-card {
    padding: 20px;
  }

  .welcome-stats {
    justify-content: center;
  }
}
</style>
